<template>
    <div>
        <div style="font-size:10px">
            <van-cell class="article-item" border :to="{
                name:'article',
                params: {
                    articleId: article.art_id
                }
            }">
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                    <!-- 标题 --> 
                    <div class="title van-multi-ellipsis--l3" >{{article.title}}</div>
                    <!-- 三张图 -->
                    <div class="cover-wrap " v-if="article.cover.type === 3">
                        <van-image
                        class="cover-wrap-item"
                        v-for="(img ,index) in article.cover.images"
                        :key="index"
                         height="73"
                         fit="cover"
                         :src="img"
                         />
                    </div>
                    <!-- 底部小字 -->
                    <div class="bottom-text">
                        <span>{{article.aut_name}}</span>
                        <span>{{article.comm_count}}评论</span>
                        <span>{{article.pubdate | relativeTime}}</span>
                    </div>
                </template>
                <!-- 一张图的情况 -->
                <template>
                    <van-image
                    v-if="article.cover.type === 1"
                    width="116"
                    height="73"
                    fit="cover"
                    :src="article.cover.images[0]"
                    />
                </template>
            </van-cell>
            <div class="line">
            </div>
        </div>
    </div>
</template>
<script>
export default {
 name: 'ArticleItem',
 props: {
     article: {
         type: Object,
         required: true
     }
 },
 data() {
     return {

     }
 }
}
</script>
<style lang="less" scoped>
.article-item {
    .title {
        font-size: 16px;
        color: #333;
        font-weight: 400 ;
    }
    /deep/ .van-cell__value{
        flex: unset;
        width: 116px;
        height: 76px;
        margin-left: 12px;
        
    }
    .cover-wrap{
        display: flex;
        padding: 15px 0;
        .cover-wrap-item{
            flex: 1;
            border-radius: 4px !important;
            &:not(:last-child){
                padding-right: 6px;
            }
        }
        
    }
    .bottom-text{
        font-size: 12px;
        color: #b4b4b4;
    }
    .bottom-text span {
        margin-right: 8px !important;
    }
    .line {
        width: 375px;
        height: 1px;
        background-color: #ccc;
    }
}

</style>
